<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>报警查询</title>
		<link href="../../css/Hui.css" rel="stylesheet" type="text/css" />
		<link href="../../plugins/swiper/swiper.min.css" rel="stylesheet" />
		<style type="text/css">
		</style>
	</head>
	<body>
		<div class="H-padding-vertical-bottom-10"></div>
		<header class="H-header H-theme-background-color9 H-padding-vertical-top-25" id="header">
		    <span onclick="goBack()" class="H-icon H-position-relative H-display-inline-block H-float-left H-vertical-middle H-theme-font-color-white H-padding-horizontal-left-5 H-z-index-100">
				<i class="H-iconfont H-icon-target-back H-font-size-18 H-vertical-middle"></i>
			</span>
		    <div class="H-header-title H-center-all H-font-size-18 H-text-show-row-1 H-theme-font-color-white 
			H-position-absolute H-width-100-percent">报警信息</div>
		</header>
		
		<div class="H-flexbox-horizontal H-theme-background-color-white">
		    <div class="H-flexbox-horizontal H-margin-vertical-bottom-10">
		        <input id="dateTime" type="text" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12" 
				placeholder="请选择监控日期" readonly="readonly" tapmode="" onclick="dateClick()" /><span class="H-icon H-vertical-middle H-padding-horizontal-right-10 H-theme-background-color-white">
				<i class="H-iconfont H-icon-time H-font-size-16 H-vertical-middle H-theme-font-color-999"></i></span>
		    </div>
		</div>
		
		<div class="H-flexbox-horizontal H-theme-background-color-white">
			<div class="H-flexbox-horizontal H-margin-vertical-bottom-10">
				<input id="alarmTypeText" type="text" class="H-textbox H-vertical-align-middle H-vertical-middle 
		   H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12"
					placeholder="请选择报警类型" readonly="readonly" tapmode="" onclick="alarmTypeSelect()" value="全部" />
					
				<input id="alarmType" type="hidden" value="-1" />	
				<span class="H-icon H-vertical-middle H-padding-horizontal-right-10 H-theme-background-color-white">
					<i class="H-iconfont H-icon-arrow-down H-font-size-16 H-vertical-middle H-theme-font-color-999"></i>
				</span>
			</div>
		</div>
		
		
		
		
		
		
		
		

		<div class="H-overflow-scrolling H-margin-10 H-position-relative">
			<table
				class="H-table H-table-fixed H-theme-background-color-white H-border-vertical-top-after H-border-horizontal-left-after">
				<thead>
					<tr>
						<th
							class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">
							序号</th>
						<th
							class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">
							报警类型</th>
						<th
							class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">
							报警时间</th>
						<th
							class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">
							报警信息</th>
					</tr>

				</thead>
				<tbody id="container">


				</tbody>
			</table>
		</div>
		<script src="../../plugins/swiper/swiper.min.js"></script>
		<script src="../../script/H.js" type="text/javascript"></script>
		<script src="../../script/jquery-3.7.1.min.js" type="text/javascript"></script>
		<script src="../../api.js" type="text/javascript"></script>
		<script src="../../script/vconsole.min.js"></script>
		<script src="../../api.js" type="text/javascript"></script>
		<script>
			//初始化一下就可以了，
			let vConsole = new VConsole();
			//你打印的数据 比如
			console.log('test');
			//就可像小程序一样的看了和调试了。
		</script>


		<script type="text/javascript">
			
			
			var alarmType = 0;
			var currDate = '';
			var deviceId = '';
			
			
			var swiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				slidesPerView: 3,
				paginationClickable: true,
				spaceBetween: 0
			});

			$(function() {
				
				currDate = getCurrentTimeString();
				$("#dateTime").val(currDate);
				deviceId = getQueryString("deviceId");
				
				searchDevice(deviceId, currDate, alarmType);
			});

			var pageIndex = 1;

			function searchDevice(deviceId, currDate, alarmType) {
				if(alarmType == -1){
					alarmType = '';
				}
				$.ajax({
					type: "get",
					url: baseServer + 'device/pageAlarmQuery?pageIndex=' + 1 +
						"&pageSize=10&userId=1&dataType="+alarmType+"&deviceId=" + deviceId + "&dateRange=2023-10-10-2023-10-11",
					async: false,
					success: function(json) {
						if (json && json.code === 0) {
							var list = json.data.list;
							joinHtml(list)
						}
					},

				});
			}


			// -after">序号</th>
			// -after">报警类型</th>
			// -after">报警时间</th>
			// -after">报警信息</th>

			function joinHtml(data) {
				$("#container").empty()
				for (let i = 0; i < data.length; i++) {
					var item = data[i];
					var sb = '<tr>';
					sb +=
						'       <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">' +
						(i + 1) + '</td>';
					sb +=
						'       <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">' +
						item.alarmTypeName + '</td>';
					sb +=
						'       <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">' +
						item.uploadTime + '</td>';
					sb +=
						'       <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">' +
						item.content + '</td>';
					sb += '   </tr>';
					$("#container").append(sb)
				}


			}



			function alarmTypeSelect() {
				// // 数据类型(0:实时报警1：分钟均值报警2：小时均值报警3：设备报警4：超标5：日报警6：综合报警7：超标汇总报警)
				// case 0:
				// 	this.alarmTypeName = "实时报警";
				// 	break;
				// case 1:
				// 	this.alarmTypeName = "预警";
				// 	break;
				// case 2:
				// 	this.alarmTypeName = "超标";
				// 	break;
				// case 3:
				// 	this.alarmTypeName = "设备报警";
				// 	break;
				// case 4:
				// 	this.alarmTypeName = "断线";
				// 	break;
				// case 5:
				// 	this.alarmTypeName = "数据不变";
				// 	break;
				
				
				H.selectTip(this, ['实时报警', '预警', '超标', '设备报警', '断线', '恒值'], function(index, value) {
					//H.alert('当前的索引为：' + index + '，' + '值为：' + value);
					$("#alarmType").val(index);
					$("#alarmTypeText").val(value);
					alarmType = index;
					
					searchDevice(deviceId, currDate, alarmType);
					
					
				}, function(index, value) {
					H.toast('你点击了取消');
				})


		}
			
		
		function dateClick(){
			H.dateTip(this, function (date) { 
				//H.alert(date); 
				$("#dateTime").val(date.year +"-"+date.month +"-"+date.day);
				searchDevice(deviceId, currDate, alarmType);
			}, function (date) {
				H.toast('你点击了取消'); 
			});
		}	
			
			
		</script>
	</body>
</html>
